<template>
  <div>
    <div class="jl_form" @click="click">
      <div class="jl_form_item bor_bottom">
      <span class="w04" style="color: gray">
        <em class="font_red" v-if="required">*</em>
        {{label}}
      </span>
        <span class="w08 tr">{{v}}</span>
        <i class="fa fa-angle-right"></i>
      </div>
    </div>
    <jl-picker
      :is-visible="isShow"
      :list-data="[list]"
      itemKey="value"
      @confirm="ok"
      @close="close"/>
  </div>
</template>

<script>
  export default {
    name: "jl-from-select",
    props: {
      label: {type: String},
      required: {
        type: Boolean,
        default: false
      },
      defaultKey: {
        type: String,
      },
      options: {
        type: Object, // {'key':'value'}
        default() {
          return {}
        }
      },
      value: {type: Object}
    },
    data() {
      return {
        isShow: false,
        list: [],
        v: undefined
      }
    },
    methods: {
      click() {
        this.isShow = true;
      },
      ok(o) {
        o = o[0];
        this.v = o['value'];
        this.$emit('input', o)
      },
      close() {
        this.isShow = false;
      }
    },
    created() {
      this.list = [];
      let keys = Object.keys(this.options);
      for (let i = 0; i < keys.length; i++) {
        this.list.push({key: keys[i], value: this.options[keys[i]]})
      }

      if (!$Utils.isNull(this.defaultKey)) {
        this.ok([{key: this.defaultKey, value: this.options[this.defaultKey]}])
      }
    }
  }
</script>

<style scoped>
</style>
